// inline btn
.article span.btn
  display: inline
  a
    text-decoration: none
    border-bottom: none
    display: inline-block
    padding: 3px 4px 2px 4px
    margin: 2px
    line-height: 1.1
    border-radius: 2px
    i
      margin-right: 2px
    trans()
    &:not([href])
      opacity: 0.5
      &:hover
        cursor: $not-allowed,not-allowed

  & a, &.regular a
    color: $color-link
    border: 1px solid @color
    &:hover
      color: $color-hover
      border-color: $color-hover
    i
      margin-right: 4px

  &.regular a, &.solid a
    padding: 8px 12px

  &.solid a
    background: $color-link
    color: $color-inner
    &:hover
      color: $color-inner
      background: $color-hover

  &.large a
    font-size: 1rem
    padding: 12px 36px
    i
      margin-right: 8px

  &.center
    display: block
    text-align: center


// btns
.article div.btns
  margin: 0 -0.5 * $gap
  &,p,a
    font-size: $fontsize-code
    color: $color-p
  b
    font-size: $fontsize-meta
  display: flex
  flex-wrap: wrap
  align-items: flex-start
  overflow: visible
  line-height: 1.8
  &.wide>a
    padding-left: $gap*2
    padding-right: $gap*2
  &.fill>a
    flex-grow: 1
    width: auto
  &.around
    justify-content: space-around
  &.center
    justify-content: center
  &.grid2>a
    width: "calc(100%/2 - %s)" % $gap
    @media screen and (max-width: $device-laptop)
      width: "calc(100%/2 - %s)" % $gap
    @media screen and (max-width: $device-tablet)
      width: "calc(100%/2 - %s)" % $gap
    @media screen and (max-width: $device-mobile)
      width: "calc(100%/1 - %s)" % $gap
  &.grid3>a
    width: "calc(100%/3 - %s)" % $gap
    @media screen and (max-width: $device-laptop)
      width: "calc(100%/3 - %s)" % $gap
    @media screen and (max-width: $device-tablet)
      width: "calc(100%/3 - %s)" % $gap
    @media screen and (max-width: $device-mobile)
      width: "calc(100%/1 - %s)" % $gap
  &.grid4>a
    width: "calc(100%/4 - %s)" % $gap
    @media screen and (max-width: $device-laptop)
      width: "calc(100%/3 - %s)" % $gap
    @media screen and (max-width: $device-tablet)
      width: "calc(100%/3 - %s)" % $gap
    @media screen and (max-width: $device-mobile)
      width: "calc(100%/2 - %s)" % $gap
  &.grid5>a
    width: "calc(100%/5 - %s)" % $gap
    @media screen and (max-width: $device-laptop)
      width: "calc(100%/4 - %s)" % $gap
    @media screen and (max-width: $device-tablet)
      width: "calc(100%/3 - %s)" % $gap
    @media screen and (max-width: $device-mobile)
      width: "calc(100%/2 - %s)" % $gap
  a
    trans()
    text-decoration: none
    border-bottom: none
    margin: $gap * 0.5
    margin-top: "calc(1.25 * %s + 32px)" % $gap
    min-width: 120px
    font-weight: bold
    display: flex
    justify-content: flex-start
    align-content: center
    align-items: center
    flex-direction: column
    padding: $gap * 0.5
    text-align: center
    &>img:first-child, &>i:first-child
      trans()
      height: 64px
      width: 64px
      box-shadow: $boxshadow-card
      &.auto
        width: auto
      margin: $gap $gap * 0.5 $gap * 0.25 $gap * 0.5
      margin-top: "calc(-1.25 * %s - 32px)" % $gap
      border: 2px solid $color-card
      background: $color-inner
      line-height: 60px
      font-size: 28px
    &>i:first-child
      color: $color-inner
      background: $color-theme
    background: $color-block
    border-radius: 4px
    p,b
      margin: .25em
      font-weight: normal
      line-height: 1.25
      word-wrap: break-word
    b
      font-weight: bold
      line-height: 1.3
    img
      margin: .4em auto
    &:not([href])
      cursor: default
      color: inherit
    &[href]:hover
      background: alpha($color-hover, 15%)
      &,b
        color: $color-hover
      &>img:first-child, &>i:first-child
        transform: scale(1.1) translateY(-8px)
        box-shadow: $boxshadow-float
      &>i:first-child
        background:$color-hover
  &.circle a
    &>img:first-child, &>i:first-child
      border-radius: 32px
  &.rounded a
    &>img:first-child, &>i:first-child
      border-radius: 16px
